import Taro, { Component, Config } from '@tarojs/taro'
import { connect } from '@tarojs/redux'
import { View, Image } from '@tarojs/components'
import Mpage from '../../components/mp-page'
import Empty from '../../components/empty'
import Nomore from '../../components/no-more'
import { namespace } from '../../models/topic-maidan'
import './index.less'

interface IProps {
  state: string
  hasMore: boolean
  items: []
}

class Index extends Component<IProps> {
  componentWillMount() {}

  async componentDidMount() {
    await this.props.dispatch({
      type: `${namespace}/loadTopics`
    })
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  onScrolltolower = async () => {
    await this.props.dispatch({
      type: `${namespace}/loadTopics`
    })
  }
  onRetry = async () => {
    await this.props.dispatch({
      type: `${namespace}/loadTopics`
    })
  }
  onRefresh = async () => {
    await this.props.dispatch({
      type: `${namespace}/loadTopics`
    })
  }
  onSearch = async (e) => {
    // console.log(e)
    const { value } = e.detail
    if (value) {
      await this.props.dispatch({
        type: `${namespace}/setState`,
        payload: {
          pageIndex: 1,
          hasMore: true
        }
      })
      await this.props.dispatch({
        type: `${namespace}/searchTopic`,
        payload: {
          keyWord: value
        }
      })
    }
  }
  onCancel = async () => {
    console.log('cancel......')
    await this.props.dispatch({
      type: 'setState',
      payload: {
        items: [],
        hasMore: true,
        pageIndex: 1
      }
    })
    await this.props.dispatch({
      type: `${namespace}/loadTopics`
    })
  }
  goTopic = (id) => {
    Taro.navigateTo({
      url: '/pages/topic?id=' + id
    })
  }
  goAdd = () => {
    Taro.navigateTo({
      url: '/pages/topic-add'
    })
  }
  onAction = () => {}

  config: Config = {
    navigationBarTitleText: '话题广场',
    usingComponents: {
      loading: '../../components/loading/loading',
      searchbar: '../../components/searchbar/searchbar'
    }
  }

  render() {
    const { state, items, hasMore } = this.props
    // console.log(this.props)
    return (
      <Mpage
        state={state}
        offset={0}
        marginOffset={0}
        enableTips={false}
        enableRefresh={false}
        showMoreLoading={false}
        onRetry={this.onRetry}
        onRefresh={this.onRefresh}
        onScrolltolower={this.onScrolltolower}
      >
        <View className="maidan">
          <searchbar
            placeholder="输入话题"
            throttle={1000}
            onInput={this.onSearch}
            onCancel={this.onCancel}
          ></searchbar>
          {items.length ? (
            <block>
              <View className="list">
                {items.map((item) => {
                  return (
                    <View className="item" key={item.id} hoverClass="item-hover">
                      <View className="item-main">
                        <Image src={item.iconPath} />
                        <View className="item-content">
                          <View className="item-title">
                            <View className="item-title-t">{item.title}</View>
                            <View className="item-title-c">
                              {item.followCount}
                              {item.nickName}
                            </View>
                          </View>
                          <View className="item-des">{item.des}</View>
                        </View>
                      </View>
                    </View>
                  )
                })}
              </View>
              {hasMore ? <loading show type="circle" /> : <Nomore />}
              <View className="btn-add" hoverClass="btn-hover" onClick={this.goAdd}>
                <View className="icon icon-add" />
                <View>创建话题</View>
              </View>
            </block>
          ) : (
            <Empty des="还没有找到话题,你可以创建话题" btnTxt="创建话题" action={this.onAction} />
          )}
        </View>
      </Mpage>
    )
  }
}

const mapStateToProps = (models) => {
  return {
    ...models[namespace]
  }
}
export default connect(mapStateToProps)(Index)
